{% extends '../layout.html' %}

<!-- header-start -->
{% block head %}
    {% parent %}
    <title>在线DIY</title>
    <link rel="stylesheet" type="text/css" href="/component/layer/layer.css" />
    <link rel="stylesheet" type="text/css" href="/css/page/diy.css" />
{% endblock %}
<!-- header-end -->

<!-- body-start -->
{% block content %}
    <div class="alt-example hide" onclick="$('.alt-example').addClass('hide')">
        <a class="close" onclick="$('.alt-example').addClass('hide')"></a>
        <img class="view">
    </div>
    <div id="team777Vue">
        <header class="diy-header">
            <span class="icon icon-prev"></span>
            <h2 class="title">{{ titles }}</h2>
            <span class="submit-btn" @click="saveEditSvg()">提交</span>
        </header>
        <div class="loading-box">
            <div class="loader loader-1" :style="loadingStatus?'display:block':'display:none'">
                <div class="loader-outter"></div>
                <div class="loader-inner"></div>
            </div>
        </div>
        <div class="svg-content-panel">
            {% if kind=="bag" %}
                <div class="bag-handle">
                    <img id="handle-bg" style="max-width:100%;">
                </div>
                <div class="bag-bg-v">
                    <img id="body-bg" src="" class="bag-bg-img">
                    <div class="svg-content">
                        <div id="svg_content_box">
                        </div>
                    </div>
                </div>
            {% else %}
                <div id="svg_content_box">
                </div>
            {% endif %}
        </div>

        <div class="bottom-tool">
            <div class="clearfix-row">
                <div class="svg-operate">
                    <div class="upload-image-box">
                        <input class="upload-file" type="file" @change="uploadUserImages" value="上传图片" />
                        <span class="upload-txt">上传图片</span>
                    </div>
                    <div class="upload-text-box">
                        <span class="upload-txt" @click="showEditTextDialog()">上传文字</span>
                    </div>
                    {% if kind=="bag" %}
                        <div class="example" onclick="$('.alt-example').removeClass('hide')">查看样例</div>
                    {% endif %}
                </div>
            </div>
            <div class="svg-template-list-box">
                <ul class="svg-template-list">
                    <li v-for="item in templateList" :class="template==item?'active':''" @click="showNewTemplate(item)" :style="item.url?'background-image:url('+item.url+')':''">
                        <!-- <img :src="item.url" v-if="item.url"> -->
                        <p class="template-name" v-text="item.name"></p>
                    </li>
                </ul>
            </div>
        </div>

         <!-- 文字编辑 -->
         <div id="edit-text-box" class="edit-text-box" @click="closeEditTextDialog" :class="show?'active effect':''">
            <div id="edit-text-content" class="edit-text-content">
                <div class="content-block">
                    <div class="buttons-tab">
                        <a class="tab-link" v-for="(tab, index) in tabs" :class="{active:tab.active}" @click="tabChange(index)">
                            {% raw %}{{ tab.text }}{% endraw %}
                        </a>
                    </div>
                </div>
                <a class="btn" @click="submit">确认添加</a>
                <div class="edit-text-scroll">
                    <div class="edit-text-tab" v-show="tabs[0].active">
                        <textarea class="edit-textarea" placeholder="最多输入6个字" v-model="text" maxlength="6"></textarea>
                        <div class="text-direction">
                            文字方向：
                            <input id="horizontal" type="radio" name="vertical" value="0" checked><label for="horizontal">横向</label>
                            <input id="vertical" type="radio" name="vertical" value="1"><label for="vertical">纵向</label>
                        </div>
                    </div>
                    <div class="edit-text-tab" v-show="tabs[1].active">
                        <ul class="edit-text-font clearfix">
                            <li v-for="(font, index) in fonts" :class="{active:font.active}" @click="change(fonts,index)"><img :src="font.img" width="80%"></li>
                        </ul>
                    </div>
                    <div class="edit-text-tab" v-show="tabs[2].active">
                        <ul class="edit-text-color clearfix">
                            <li class="iconfont" v-for="(item, index) in colors" :style="{backgroundColor:item.color}" :class="{active:item.active}" @click="change(colors,index)"></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="pop-pages add-order">
        <div class="headers">
            <i class="iconfont icon-prev f-s-20 float-left w-50 text-a-c" onclick="diyPage.closeAddOrd();"></i>
        </div>
        <div class="clearfix-row">
            <div class="display-b p-l-10 p-r-10">
                <div class="clearfix-row m-t-16">
                    <div class="text-box display-f">
                        <input id="receiver" class="flex-1" type="text" placeholder="收件人">
                    </div>
                </div>
                <div class="clearfix-row m-t-16">
                    <div class="text-box display-f">
                        <input id="mobile" class="flex-1" type="text" placeholder="手机号码">
                    </div>
                </div>
                <div class="clearfix-row m-t-16">
                    <div class="text-box display-f">
                        <div class="flex-3 m-r-10">
                            <select class="btn-select w-bar-100" id="province" class="select" onchange="addAddress.changeProvince(this)"></select>
                        </div>
                        <div class="flex-3 m-r-10">
                            <select class="btn-select w-bar-100" id="city" class="select" onchange="addAddress.changeCity(this)"></select>
                        </div>
                        <div class="flex-3">
                            <select class="btn-select w-bar-100" id="district" class="select" onchange="addAddress.changeDistrict(this)"></select>
                        </div>
                    </div>
                </div>
                <div class="clearfix-row m-t-16">
                    <div class="text-box display-f" data-hint="详细地址不能为空">
                        <textarea id="detail" class="flex-1 text-a-l h-100 p-t-10 p-b-10" placeholder="详细地址"></textarea>
                    </div>
                </div>
                <div class="clearfix-row m-t-16">
                    <div class="text-box display-f">
                        <input id="remark" class="flex-1" type="text" placeholder="备注">
                    </div>
                </div>
                <div class="clearfix-row m-t-16">
                    <div class="text-box display-f">
                        <input id="coupon" class="flex-1" type="text" placeholder="优惠码" onblur="diyPage.getCoupon()">
                    </div>
                </div>
                <div class="clearfix-row m-t-16">
                    <a class="counts-add" onclick="diyPage.counts('add')">+</a>
                    <div class="text-box float-left m-l-5 m-r-5">
                        <input id="counts" type="text" class="w-50 text-a-c" placeholder="购买数量" value="1" onchange="diyPage.counts()"/>
                    </div>
                    <a class="counts-minus" onclick="diyPage.counts('minus')">-</a>

                    <span class="float-left line-h-40 m-l-20 color-red" id="price">￥0</span>
                </div>
                <a class="clearfix-row">
                    <a class="btn-white active post m-b-10" onclick="diyPage.upload()">
                        提交
                    </a>
                </a>
            </div>
        </div>
    </div>
{% endblock %}
<!-- body-end -->

<!-- script-start -->
{% block script %}
    <script type="text/javascript" src="/js/base/lib/rem.js"></script>
    <script type="text/javascript" src="/component/layer/layer.js"></script>
    <script type="text/javascript" src="/js/base/lib/vue.js"></script>
    <script type="text/javascript" src="/js/base/lib/vue-resource.min.js"></script>
    <!-- <script type="text/javascript" src="/js/base/lib/fastclick.min.js"></script> -->
    <script type="text/javascript" src="/js/base/lib/canvg/canvg.min.js"></script>
    <script type="text/javascript" src="/js/base/lib/svg/svg.min.js"></script>
    <script type="text/javascript" src="/js/base/lib/address.js"></script>
    <script type="text/javascript" src="/js/page/diy.js"></script>
{% endblock %}
<!-- script-end -->